<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" http-equiv="Content-Type" content="width=device-width, initial-scale=1; charset=UTF-8">
	<link rel="stylesheet" href="css/amazeui.min.css"> 
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script src="//s.amazeui.org/assets/2.x/js/jquery.min.js"></script>
	<script src="//cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
	<title>事件详细信息页面</title>
	<style type="text/css">
		#head{background-color:#eee;}
		.box{
		    width:100%; margin-top:10%; margin:auto; padding:5%;
		    height:40%; border:1px #111 solid;    position: relative;
		    left:50%; top:50%; 
		    display:none;       left: 0;  buttom:0;  z-index:1001;      
		     background-color: white;  
		}
		.box.show{display:block;} 
		.box .x{ font-size:18px; text-align:right; display:block;}
		.box input{width:80%; font-size:18px; margin-top:5%;}
	</style>
</head>
	
<body>

	<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
	    <div class="am-header-left am-header-nav">
	        <a href="#doc-oc-demo1" data-am-offcanvas class="" >
	            <i class="am-header-icon am-icon-angle-left" style="font-size: 22px;"></i>
	        </a>
	    </div>
	    <h1 class="am-header-title">
	          	详细信息 	
	    </h1>
	    <div class="am-header-right am-header-nav">
          	<a data-am-modal="{target: '#alter'}" href="#right-link" class="">
           	     修改
          	</a>
      	</div>
	</header>

	<section class="am-panel am-panel-secondary">
		<header class="am-panel-hd">
			<h3 class="am-panel-title">编号:NO201712050002</h3>
		</header>
		<div  class="am-panel-bd">
			<table class="am-table" style="margin-bottom: 0px;">
			  	<thead>
				    <tr>
			
				        <th style="border-bottom: 0px;">维修项目</th>
				        <th style="border-bottom: 0px;">型号</th>
			
				    </tr>
			 	</thead>
	  			<tbody>
				    <tr>  
				        <!--<td>NO201712050002</td>-->
				        <td style="border-top: 0px;border-bottom: 2px solid #ddd;">电脑</td>
				        <td style="border-top: 0px;border-bottom: 2px solid #ddd;">NO201712050002</td>
				        <!--<td>待网点确认  </td>-->
				    </tr>
	   			</tbody>
	   		</table>
			<table class="am-table" style="margin-bottom: 0px;">
		  		<thead>
		    		<tr>
				        <th style="border-bottom: 0px;">网点</th>
				        <th style="border-bottom: 0px;">申请部门</th>
				        <th style="border-bottom: 0px;">日期</th>
		    		</tr>
		  		</thead>
		  		<tbody>
		   			<tr>  
		        		<td style="border-top: 0px;border-bottom: 2px solid #ddd;">久事</td>
		        		<td style="border-top: 0px;border-bottom: 2px solid #ddd;">劳动服务</td>
		        		<td style="border-top: 0px;border-bottom: 2px solid #ddd;">2017-12-27</td>
		    		</tr>
		   		</tbody>
		   </table>
		   <table class="am-table" style="margin-bottom: 0px;">
		  		<thead>
				    <tr>
				        <th style="border-bottom: 0px;">故障详情</th>
				    </tr>
		  		</thead>
			  	<tbody>
			    	<tr>  
				        <td style="border: 1px solid rgba(160, 151, 151, 0.5);border-radius: 3px;height: 100px;">
				        	<p>屏幕不亮</p>
				        </td>
			    	</tr>
			   </tbody>
		   </table>
		   <table class="am-table" style="margin-bottom: 0px;">
		  		<thead>
		    		<tr>
		        		<th>当前进度<a data-am-modal="{target: '#log'}" style="position: absolute;right: 1.25rem;">日志</a></th>
		    		</tr>
		  		</thead>
		  		<tbody>
		    		<tr>  
		        		<td style="padding-left: 0px;">
		        	 		<div class="am-progress" style="width: 75%;margin-top: 10px;margin-bottom: 1rem;">
								<div class="am-progress-bar" style="width: 40%">待网点处理</div>
								<a class="am-badge am-badge-danger am-radius" style="position: absolute;right: 15px;font-size: 15px;">紧急</a>
							</div>
		        		</td>
		    		</tr>
		   		</tbody>
		   </table>
	
			<div style="margin-top: 10px;">
				 <img src="img/photo_example.jpg" class="am-img-responsive" alt=""/>
			</div>
			
			</br>
			
		   <table class="am-table" style="margin-bottom: 0px;">
		   		<thead>
		    		<tr> 
		    			<th style="border-bottom: 0px;">报修人</th>     
		        		<th style="border-bottom: 0px;">联系电话</th>
		    		</tr>
		  		</thead>
		  		<tbody>
		  			 <tr>
		        		<td style="border-top: 0px;border-bottom: 2px solid #ddd;">赵文浩</td>                 
		        		<td style="border-top: 0px;border-bottom: 2px solid #ddd;">
		        			<a href="tel:null">15659180380</a>
		        		</td>	                    
		    		</tr>
		 		 </tbody>
		   </table>
		   <table class="am-table" style="margin-bottom: 0px;">
		   		<thead>
		    		<tr> 
		    			<th style="border-bottom: 0px;">处理员</th>     
		        		<th style="border-bottom: 0px;">联系电话</th>
		    		</tr>
		  		</thead>
			  	<tbody>
			  		<tr>
			        	<td style="border-top: 0px;border-bottom: 2px solid #ddd;">赵文浩</td>                 
			        	<td style="border-top: 0px;border-bottom: 2px solid #ddd;">
			        		<a href="tel:null">15659180380</a>
			        	</td>             
			    	</tr>
			 	</tbody>
		   </table>
		  
		   
		   <table class="am-table" style="margin-bottom: 0px;">
		   		<thead>
		   			<tr> 
		    			<th style="border-bottom: 0px;">维修员</th>     
		        		<th style="border-bottom: 0px;">联系电话</th>
		    		</tr>
		  		</thead>
		  		<tbody>
		  	 		<tr>
		        		<td style="border-top: 0px;border-bottom: 2px solid #ddd;">赵文浩</td>                 
		        		<td style="border-top: 0px;border-bottom: 2px solid #ddd;">
		        			<a href="tel:null">15659180380</a>
		        		</td>
					</tr>
		  		</tbody>
		   </table>		 	
		 </br>    	
		</div>
	</section>
	

	<div class="am-modal am-modal-no-btn" tabindex="-1" id="log">
	  	<div class="am-modal-dialog" style="width: 85%;">
	   	 	<div class="am-modal-hd" style="background: #f04f4f;color: white;">维修日志
	      		<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
	    	</div>
	    	<div class="am-modal-bd log" style="padding-right: 4px;margin-top: 11px;">
	     	 	<ul style="list-style: none;padding: 0px;margin: 0px;">
	     	 		<li class="logli" style="text-align: -webkit-auto;border-bottom: solid #c6c3c3;padding-bottom: 7px;margin-top: 7px;">
	     	 			<span style="float: left;margin-top: 6px;">23:15
	     	 			</br>
	     	 			<span style="font-size: 6px;">12-29</span>
	     	 			</span>

	     	 			<div style="margin-left: 55px;border: solid 2px rgba(0,0,0,.5);padding: 5px;border-radius: 4px;">
	     	 				<p style="margin-bottom: 6px;font-size: 14px;">内容</p>
	     	 				<div style="text-align: right;font-size: 14px;color: red;">
	     	 					<span>— <span class="am-icon-user"></span> 人名</span>
	     	 				</div>
	     	 			</div>
	     	 		</li>
	     	 		
	     	 		<li class="logli" style="text-align: -webkit-auto;border-bottom: solid #c6c3c3;padding-bottom: 7px;margin-top: 7px;">
	     	 			<span style="float: left;margin-top: 6px;">23:15
	     	 			</br>
	     	 			<span style="font-size: 6px;">12-29</span>
	     	 			</span>

	     	 			<div style="margin-left: 55px;border: solid 2px rgba(0,0,0,.5);padding: 5px;border-radius: 4px;">
	     	 				<p style="margin-bottom: 6px;font-size: 14px;">内容</p>
	     	 				<div style="text-align: right;font-size: 14px;color: red;">
	     	 					<span>— <span class="am-icon-user"></span> 人名</span>
	     	 				</div>
	     	 			</div>
	     	 		</li>
	     	 	</ul>
	    	</div>
	  	</div>
	</div>
	
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="alter">
	  	<div class="am-modal-dialog">
	   	 	<div class="am-modal-hd"  style="background: #f04f4f;color: white;">修改
	      		<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
	    	</div>
	    	<div class="am-modal-bd" style="margin-top: 10px;">
	     		<form action="" class="am-form">
	     			<div class="am-form-group" style="text-align: -webkit-auto;">
	     				<label>维修项目：</label>
	     				<select>
	     					<option value="1">存款机、取款机（1）</option>
	     					<option value="2">回单自助打印机</option>
	     					<option value="3">多媒体自助终端</option>
	     					<option value="4">智能终端，产品领取机</option>
	     					<option value="5">走马灯、电视内容不更新</option>
	     					<option value="6">存折打印机(GWI PR70)</option>
	     					<option value="7">虹光扫描仪</option>
	     					<option value="8">指纹仪</option>
	     					<option value="9">非存折打印机</option>
	     					<option value="11">存折打印机(PR2、PR9)</option>
	     					<option value="22">联想计算机</option>
	     					<option value="33">网银自助终端</option>
	     					<option value="44">传统回单箱</option>
	     					<option value="55">授权PAD硬件损坏</option>
	     					<option value="66">排队叫号机</option>
	     					<option value="77">双屏理财终端维修电话</option>
	     					<option value="88">电视机</option>
	     					<option value="99">走马灯及彩屏不亮、缺字</option>
	     					<option value="0">电子竖屏</option>
	     					<option value="00">网店内网、外网WIFI</option>
	     					<option value="111">PAD软件故障</option>
	     					<option value="222">网点通讯线路</option>
	     					<option value="333">计算机软件故障</option>
	     					<option value="444">停水</option>
	     					<option value="555">停电</option>
	     					<option value="666">桌椅等家具</option>
	     					<option value="777">灯泡</option>
	     					<option value="888">电话</option>
	     					<option value="999">门楣标识</option>
	     					<option value="000">灯箱</option>
	     					<option value="1111">海报框</option>
	     					<option value="2222">现金区联动门</option>
	     					<option value="3333">监控录像</option>
	     					<option value="4444">联动门</option>
	     					<option value="5555">报警器</option>
	     					<option value="6666">灭火器</option>
	     					<option value="7777">门禁</option>
	     				</select>
	     				<label>故障详情</label>
	     				<textarea class="" rows="5" id="doc-ta-1" required="required"></textarea>
	     				<label>报修人姓名</label>
	     				<input type="text" placeholder="" required="required">
	     				<label>报修人电话</label>
	     				<input type="number" placeholder="">
	     				<button class="am-btn am-btn-secondary" type="submit" style="margin-top: 10px;width: 100%;">提交</button>
	     			</div>
	     		</form>
	    	</div>
	  	</div>
	</div>


</body>
<script src="js/GetUser.js" type="text/javascript"></script>
<script>
	$(function() {
		
	  $('select').selected({
	
	    maxHeight: '100px',
	    searchBox: '0'
	  });
	});
	
	
</script>